<template>
    <div>
        <!-- 调用后端接口渲染 -->
        <div>
            <!-- 渲染数据 实现上拉下拉 -->
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">

                <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
                    <van-cell v-for="(item, index) in listData" :key="index" class="list" @click="kuyx(item)"
                        style="width: 110%;border-top: 1px solid #e8e8e8;  ">
                        <!-- 图片 -->
                        <div style="float: left; width: 22%;height:90px;">
                            <img src="" v-error v-img-lazy="item.image" alt="" class="left" style="width: 100%; ">
                            <!-- <img src="../../assets/13.jpg" alt="" style="width: 100%;"> -->
                        </div>
                        <!-- 内容 -->
                        <div class="right" style=" float: left;margin-left: 2%; width: 70%;height: 100%;">
                            <div class="mock"
                                style="float: left; width: 86%;;margin-left: 1%; text-align:left;white-space: pre-wrap;font-size: 16px;;color: black;">
                                {{ item.title }}
                            </div>

                            <div class="button" style="float: left; margin-left: 2%;margin-top: 10%; width: 100%;">

                                <div style="width: 38%;float: left;margin-right: 10%;margin-left: -9%;">
                                    <span style="margin-right: 7%;">{{ item.channel_name }}</span>
                                    <span>{{ item.date_str }}</span>
                                </div>

                                <div style="width:50%;float: left;margin-left: 24px;">
                                    <span style="float: left;margin-right:16px;">
                                        阅读
                                        {{ (item.view_times * 0.001).toFixed(1) }}万
                                    </span>
                                    <span style="float: left;">赞{{ (item.news_id * 0.001).toFixed(0) }}</span>
                                </div>

                            </div>

                        </div>
                    </van-cell>
                </van-list>
            </van-pull-refresh>
            <div>
            </div>
        </div>
    </div>




</template>



<script setup lang="ts">

import { ref } from 'vue'
import http from '@/http/axios'
import router from '@/router';
import { useRoute } from 'vue-router'


const listData = ref([])
// https://www.chunyuyisheng.com/cooperation/wap/health_news/
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const pagecode = ref(0)
// 请求接口
async function GetList() {
    const resp = await http.get('/static/cooperation/wap/health_news/', {
        params: {
            from_wx_mini: '1',
            page: pagecode.value,
            partner: 'chunyu_wap_mini',
            release_time: '2020-04-22%2010%3A30%3A00',
            channel_id: '0'
        }
    })
    console.log(resp.data.content_list);

    listData.value = [...listData.value,...resp.data.content_list]
}
GetList()
// 跳转详情并带传参
const kuyx = (item: any) => {
    router.push({ path: '/Enquirefordetails', query: { id: item.id } })
}
// 上拉刷新下拉加载
const onLoad = () => {
    setTimeout(() => {
        if (refreshing.value) {
            listData.value = [];
            refreshing.value = false;
        }
        for (let i = 0; i < 1; i++) {
            listData.value.push(listData.value.length + 1);
            GetList()
        }
        loading.value = false;
        if (listData.value.length>=1) {
            pagecode.value++
            // put.GetList()    
        }
    }, 1000);
};

const onRefresh = () => {
    // 清空列表数据

    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    pagecode.value++
    onLoad()
};

</script>

<style lang="scss" scoped>
.list .left {
    float: left;
    width: 28%;
}

.list .rigth {
    float: left;
    width: 90%;
    border-top: 10px solid #ccc;
    margin-left: 1%;
}

.van-cell__value .rigth .mock {
    width: 320px;
}

.van-cell__value .rigth .bootton {
    font-size: 24px;
}

.van-cell__value .rigth .bootton div {
    float: left;
    width: 50%;
}
</style>
